<template>
  <div class="can_tips">
    <head-top head-title="满意度公示" go-back="true"></head-top>
    <div class="can_box">
      <!--数据展示部分-->
      <div class="can_list" v-if="supData.length !==0 && codeNumber === 200">
        <!--头部-->
        <div class="can_search">
          <!--选择部分-->
          <div class="select_div">
            <div class="select_box">
              <div class="input" @click="openValue">
                <input v-model="selectTopics" type="text">
                <img src="./images/drop_icon.png" alt="">
              </div>
              <div class="list" v-show="show">
                <ul>
                  <li @click="getvalue(item,index)" v-for="(item,index) in supData" :key="item.index">{{ item.title }}</li>
                </ul>
              </div>
            </div>
          </div>
          <!--搜索部分-->
          <div class="search_box">
            <div class="search_view">
              <input type="text" @input="searchPlot" @keyup.enter="searchPlot" v-model="keyWords" placeholder="请输入投票码">
              <img src="./images/serach_icon.png" alt="">
            </div>
          </div>
        </div>
        <!--列表部分-->
        <div class="tips_list">
          <div class="tips_title">
            <p>投票码</p>
            <p class="center_title">{{selectTopics}}</p>
            <p>参会时间</p>
          </div>
          <!--直接展示列表-->
          <div class="tips_ul" v-if="tipsShow">
            <div class="tips_li" v-for="(sup,sindex) in listData" :key="sindex">
              <p>{{sup.numbering}}</p>
              <p class="center_text">{{sup.type}}</p>
              <p>{{sup.time}}</p>
            </div>
          </div>
          <!--搜索展示列表-->
          <div class="tips_ul" v-if="searchShow">
            <div class="tips_li" v-for="(ser,eindex) in searchData" :key="eindex">
              <p>{{ser.numbering}}</p>
              <p class="center_text">{{ser.type}}</p>
              <p>{{ser.time}}</p>
            </div>
          </div>
        </div>
      </div>


      <!--暂无数据-->
      <div class="default1" v-if="supData.length ===0 && noFlag">
        <p>抱歉！暂无数据</p>
      </div>

      <!--400的情况-->
      <div class="default" v-if="codeNumber === 400">
        <p>{{errorText}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import headTop from '../header/Header'
  import {satList, serchTips} from '../../api/homeLogin'

  export default {
    name: 'SatTips',
    data () {
      return {
        keyWords: '', // 输入信息
        type: 'sat', // 搜索类型
        show: false, // 议题弹窗
        selectIndex: 0, // 所选索引
        selectTopics: '', // 所选议题
        selectId: '', // 议题id
        supData: [],
        errorText: '', // 错误信息
        codeNumber: '', // 存放code
        noFlag: false, // 判断有无数据的显示
        tipsShow: true, // 直接展示列表是否显示
        searchData: [], // 搜索接口请求的数据
        searchShow: false // 搜索展示列表是否显示
      }
    },
    created () {
      // console.log(this.$route.params.id)
      this._getSatList()
    },
    computed: {
      listData () {
        if (this.supData.length) {
          return this.supData[this.selectIndex].data
        }
        return []
      }
    },
    methods: {
      // 搜索
      searchPlot() {
        serchTips(this.$route.params.id, this.type, this.selectId, this.keyWords).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.searchData = res.data
            this.tipsShow = false // 直接展示列表关闭
            this.searchShow = true // 搜索列表开启
          }
        })
      },
      // 议题选择
      openValue () {
        this.show = true
      },
      getvalue(item, index) {
        this.selectTopics = item.title // 议题标题
        this.selectId = item.id // 议题id
        this.selectIndex = index // 选择的索引
        this.show = false
      },
      // 直接展示列表数据
      _getSatList() {
        this.tipsShow = true // 直接展示列表开启
        this.searchShow = false // 搜索展示列表关闭
        satList(this.$route.params.id).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.supData = res.data
            // console.log(this.supData)
            if (this.supData.length === 0) {
              this.noFlag = true
            }
            this.codeNumber = res.code
            this.selectTopics = this.supData[this.selectIndex].title // 默认议题
            this.selectId = this.supData[this.selectIndex].id // 默认议题id
          }
          if (res.code === 400) {
            this.codeNumber = res.code
            this.errorText = res.error
          }
        })
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss" scoped>
  .can_tips{
    width: 100%;
    padding-top: 40px;
    .can_box{
      .can_list{
        .can_search{
          background: url('http://pic.zgwyzxw.cn/banner_file%2F%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_202004101310535e8fffe8f1b1d.png');
          background-position: bottom;
          .select_div{
            display: inline-flex;
            justify-content: center;
            width: 100%;
            padding: 30px 0;
            .select_box{
              position: relative;
              .input{
                width: 140px;
                height: 40px;
                line-height: 40px;
                padding-left: 10px;
                display: inline-flex;
                align-items: center;
                input{
                  border: none;
                  outline: none;
                  width: 100%;
                  height: 100%;
                  background: rgba(47,149,250,0);
                  /*color: #ffffff;*/
                  text-align: center;
                  color: transparent;
                  text-shadow: 0 0 0 #ffffff;
                }
              }
              .list{
                width: 150px;
                /*border: 1px solid #cccccc;*/
                overflow: hidden;
                position: absolute;
                z-index: 2;
                background: rgba(47,149,250,1);
                ul{
                  li{
                    width: 100%;
                    height: 40px;
                    cursor: pointer;
                    line-height: 40px;
                    text-align: center;
                    color: #ffffff;
                    border-bottom: 1px solid #0078de;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    box-sizing: border-box;
                  }
                  li:last-child{
                    border-bottom: none;
                  }
                }
              }
            }

          }
          .search_box{
            text-align: center;
            padding-bottom: 60px;
            .search_view{
              background: #ffffff;
              display: inline-flex;
              align-items: center;
              border-radius: 5px;
              input{
                background: #fff;
                width: 120px;
                padding: 10px;
                outline: none;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
                color: #555555;
                font-size: 15px;
                border: none;
              }
              img{
                padding-right: 10px;
              }
            }
          }
        }
        .tips_list{
          .tips_title{
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding-top: 10px;
            padding-bottom: 10px;
            box-shadow: 1px 2px 4px #888;
            .center_title{
              width: 50%;
              color: #0078de;
              font-size: 14px;
              text-align: center;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp:2;
              overflow: hidden;
              height: 19px;
            }
            p{
              padding: 10px;
              color: #0078de;
              font-size: 14px;
              text-align: center;
              width: 25%;
            }
          }
          .tips_ul{
            .tips_li{
              padding-top: 10px;
              padding-bottom: 10px;
              color: #555555;
              text-align: center;
              display: inline-flex;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              .center_text{
                font-size: 14px;
                color: #555555;
                text-align: center;
                width: 50%;
              }
              p{
                font-size: 14px;
                color: #555555;
                padding: 5px;
                text-align: center;
                width: 25%;
              }
            }
          }
        }
      }
      .default1 {
        width: 100%;
        flex: 1;
        display: inline-flex;
        padding-top: 100px;
        justify-content: center;
        align-items: center;
        background: url("../../assets/default.png") no-repeat;
        background-size: 100px 100px;
        background-position: center;
        padding-bottom: 140px;
        p {
          font-size: 15px;
          color: #0b7ad9;
          margin-top: 180px;
        }
      }
      .default {
        width: 100%;
        flex: 1;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 140px;
        p {
          font-size: 15px;
          color: #0b7ad9;
          margin-top: 180px;
        }
      }
    }
  }
</style>
